<template>
  <div>
    <!--  label: 'name',要展示的字段 value: 'id' 要存储的字段 -->
    <!-- 因为这个value值是父组件传递过来的数据，我们不能再这里使用v-model 因为如果写v-model，他的 @input 事件就会把
    父组件传递过来的数据进行修改，会破坏vue的单向数据流，子组件是不能修改父组件数据的只能通过 $emit通知父组件去修改，
    将这个语法放在change的回调函数里面去 -->
    <el-cascader
      :value="value"
      :options="options"
      style="width: 320px;"
      :props="{ label: 'name', value: 'id' }"
      clearable
      placeholder="请选择部门"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { companyDepartmentRequest } from '@/api/department' // 树状员工列表
import { transListToTreeData } from '@/utils' // 递归方法
export default {
  props: {
    value: {
      type: Number,
      default: null,
      required: true
    }
  },
  data() {
    return {
      // Cascader 级联选择器
      options: [],
      // 校验
      rules: {
        value: [{ required: true, message: '请选择部门', trigger: 'change' }]
      }
    }
  },
  // 使用 created 函数 调用 获取左侧树状员工列表的axios
  created() {
    this.companyDepartmen()
  },
  methods: {
    handleChange(value) {
      // 子组件在通知父组件数据发生修改的时候，这个数据有两种写法，有数据数组就有长度没有数据，数组就是空数组，
      // 向父组件 发的数据就是空的，所以要写if else 判断以下
      if (value.length > 0) {
        this.$emit('input', value[value.length - 1]) // 将最后一位的id取出来 传出去
      } else {
        this.$emit('input', null) // 如果长度为0 说明值为空
      }
    },
    // 封装 发送axios获取左侧树状员工列表的axios
    async companyDepartmen() {
      // 封装 发送axios获取左侧树状员工列表的axios
      const res = await companyDepartmentRequest()
      console.log(res)
      // 调用递归方法
      this.options = transListToTreeData(res.data, 0)
    }
  }
}
</script>

<style>

</style>
